body{
  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
  position relative
  #app{
    .section{
      text-align center
      color: #ccc
      font-size: 16px
      background: green 
      &:nth-child(1){
        background: #ff5f45
        color #fff
        font-size: 22px
        }
      &:nth-child(2){
        background: #0798ec
        & span{
          display inline-block
          background #fff
          width 0
          height 100px
          transition: width 1s ease .2s
          text-align center
          line-height 100px
          overflow hidden
          }
        &.active span{
          width 300px
          }
        }
      &:nth-child(3){
        background: #fc6c7c;
        & span{
          display inline-block
          background #fff
          width 0
          height 100px
          text-align center
          line-height 100px
          overflow hidden
          }
        }
      &:nth-child(4){
        background: #fec401
        & span{
          display inline-block
          background #fff
          width 0
          height 100px
          animation: grow 2s ease infinite;
          text-align center
          line-height 100px
          overflow hidden
          }
        }
      &:nth-child(5){
        background: #8fc31f
        & span{
          display inline-block
          background #fff
          width 300px
          height 100px
          color #aaa
          font-size: 24px
          text-align center
          line-height 100px
          overflow hidden
          }
        }
      &:nth-child(6){
        background pink
        & span{
          margin 10px auto
          display inline-block
          background #fff
          width 300px
          height 100px
          color #aaa
          font-size: 24px
          text-align center
          line-height 100px
          overflow hidden
          }
        &.active span{
          &:nth-child(1){
            animation: breathe 2s ease-in-out 0s infinite
            }
          &:nth-child(2){
            position relative
            transform: translateX(0)
            animation: shake .3s ease-in-out 4s infinite
            }
          }
        }
      &:nth-child(7){
        background brown
        & span{
          display inline-block
          background #fff
          width 300px
          height 100px
          color #aaa
          font-size: 24px
          text-align center
          line-height 100px
          overflow hidden
          }
        &.active span{
          animation: clock 2000ms linear infinite both
          }
        }
      }
    }
  #fp-nav{
    & ul{
      & li{
        & a{
          & span{
            background: #fff;
          }
          }
        }
      }
    }
  #control{
    margin: 0;
    padding: 0;
    position: fixed;
    left: 50%;
    width 28px;
    margin-left -14px;
    bottom: 20px;
    list-style-type: none;
    z-index: 70;
    text-align center
    height 50px;
    line-height 50px;
    color: #fff;
    cursor pointer
    font-size: 28px
    & .icon{
      animation: breathe 2s ease-in infinite
      }
    }
}
//定义图标
.icon {
  width: 1em; 
  height: 1em;
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
  }
/*定义动画*/
@keyframes grow{
  0%{
    width:0px
    }
  50%{
    width 300px
    }
  100%{
    width 0px
    }
  }
@keyframes breathe{
  0%{
    opacity 1
    transform: scale(1)
    }
  50%{
    opacity .75
    transform: scale(0.85)
    }
  100%{
    opacity 1
    transform: scale(1)
    }
  }
@keyframes shake{
  from,
  to {
    transform: translate3d(0, 0, 0);
  }
  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }
  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
  }


@keyframes animation { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  3.4% { transform: matrix3d(1.316, 0, 0, 0, 0, 1.407, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.7% { transform: matrix3d(1.45, 0, 0, 0, 0, 1.599, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.81% { transform: matrix3d(1.659, 0, 0, 0, 0, 1.893, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  9.41% { transform: matrix3d(1.883, 0, 0, 0, 0, 2.168, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  10.21% { transform: matrix3d(1.942, 0, 0, 0, 0, 2.226, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  13.61% { transform: matrix3d(2.123, 0, 0, 0, 0, 2.332, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.11% { transform: matrix3d(2.141, 0, 0, 0, 0, 2.331, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  17.52% { transform: matrix3d(2.208, 0, 0, 0, 0, 2.239, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  18.72% { transform: matrix3d(2.212, 0, 0, 0, 0, 2.187, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  21.32% { transform: matrix3d(2.196, 0, 0, 0, 0, 2.069, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.32% { transform: matrix3d(2.151, 0, 0, 0, 0, 1.96, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.23% { transform: matrix3d(2.134, 0, 0, 0, 0, 1.938, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.03% { transform: matrix3d(2.063, 0, 0, 0, 0, 1.897, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.93% { transform: matrix3d(2.048, 0, 0, 0, 0, 1.899, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  35.54% { transform: matrix3d(1.979, 0, 0, 0, 0, 1.962, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  36.74% { transform: matrix3d(1.972, 0, 0, 0, 0, 1.979, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.04% { transform: matrix3d(1.961, 0, 0, 0, 0, 2.022, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.44% { transform: matrix3d(1.966, 0, 0, 0, 0, 2.032, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(1.991, 0, 0, 0, 0, 2.006, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  59.86% { transform: matrix3d(2.006, 0, 0, 0, 0, 1.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  63.26% { transform: matrix3d(2.007, 0, 0, 0, 0, 1.992, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75.28% { transform: matrix3d(2.001, 0, 0, 0, 0, 2.003, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  85.49% { transform: matrix3d(1.999, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  90.69% { transform: matrix3d(1.999, 0, 0, 0, 0, 1.999, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(2, 0, 0, 0, 0, 2, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@keyframes clock { 
  0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  2.15% { transform: matrix3d(0.589, 0, 0, 0, 0, 1.514, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.3% { transform: matrix3d(0.297, 0, 0, 0, 0, 1.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  6.46% { transform: matrix3d(0.158, 0, 0, 0, 0, 2.052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.61% { transform: matrix3d(0.125, 0, 0, 0, 0, 2.093, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  14.16% { transform: matrix3d(0.183, 0, 0, 0, 0, 2.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  19.72% { transform: matrix3d(0.205, 0, 0, 0, 0, 1.994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  24.9% { transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25% { transform: matrix3d(0.201, 0, 0, 0, 0, 1.998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  27.15% { transform: matrix3d(0.138, 0.145, 0, 0, -1.445, 1.382, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  29.3% { transform: matrix3d(0.038, 0.196, 0, 0, -1.964, 0.379, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  30.83% { transform: matrix3d(-0.006, 0.2, 0, 0, -2, -0.059, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  31.46% { transform: matrix3d(-0.016, 0.199, 0, 0, -1.994, -0.164, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.61% { transform: matrix3d(-0.029, 0.198, 0, 0, -1.979, -0.292, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  39.16% { transform: matrix3d(-0.006, 0.2, 0, 0, -1.999, -0.065, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.99% { transform: matrix3d(0, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  44.72% { transform: matrix3d(0.002, 0.2, 0, 0, -2, 0.02, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  49.9% { transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50% { transform: matrix3d(0.001, 0.2, 0, 0, -2, 0.005, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  52.15% { transform: matrix3d(0, 0.611, 0, 0, -1.486, 0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  54.3% { transform: matrix3d(0, 0.903, 0, 0, -1.121, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  55.83% { transform: matrix3d(-0.001, 1.015, 0, 0, -0.981, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  56.46% { transform: matrix3d(-0.001, 1.042, 0, 0, -0.948, -0.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.61% { transform: matrix3d(0, 1.075, 0, 0, -0.907, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  64.16% { transform: matrix3d(0, 1.017, 0, 0, -0.979, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.99% { transform: matrix3d(0, 0.999, 0, 0, -1.001, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  69.72% { transform: matrix3d(0, 0.995, 0, 0, -1.006, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  75% { transform: matrix3d(0, 0.999, 0, 0, -1.002, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  80.83% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  91.99% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100% { transform: matrix3d(0, 1, 0, 0, -1, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

